<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        .swiper-container{
            width: 100%;
            height: 200px;
        }
        .swiper-slide img{
            width: 100%;
            height: 200px
        }
    </style>
</head>
<body> 
    <div id="app">
        <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item,index) in bg" :key="item.id" v-mydir="{bg,index}">
                <img :src="(item.img).split('/w.h').join('')" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->           
            <div class="swiper-pagination"></div>    
            <!-- 如果需要导航按钮 -->           
            <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
    </div>
    <script src="js/swiper-bundle.min.js"></script>
    <script>
        Vue.directive("mydir",(el,binding) =>{
            if(binding.value.bg.length-1 == binding.value.index){
                var mySwiper = new Swiper('.swiper-container',{
                direction: 'horizontal',
                loop: true,
                autoplay: { //定时
                delay: 2000, //时间
                disableOnInteraction:false, //操作后是否停止自动切换
                },
                pagination:{ //分页器
                el:".swiper-pagination",
                dynamicBullets: true
                },
                navigation:{ //前后切换按钮
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            }
            }) 
        }
        })
                
        const app = new Vue({
            el:"#app",
            data: {
                bg:[]
            },
            mounted(){
                axios("data/data.json").then((res) => {
                   this.bg = res.data.coming
                   console.log(this.bg);
                })   //加载数据
            },
        })
    </script>
</body>
</html>
